<section>
  <h1>Badge</h1>
  <hr>
  <doc-section [title]="'单独使用'" [code]="basic">
    <div sample>
      <app-demo-basic-badge>

      </app-demo-basic-badge>
    </div>
  </doc-section>
  <doc-section [title]="'组合使用'" [code]="combine">
    <div sample>
      <app-demo-combine-badge>

      </app-demo-combine-badge>
    </div>
  </doc-section>

  <doc-section [title]="'动态显示'" [code]="dynamic">
    <div sample>
      <app-demo-dynamic-badge>

      </app-demo-dynamic-badge>
    </div>
  </doc-section>

  <doc-section [title]="'Badge 参数'" [sample]="false">
    <table desc class="table">
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>可选值</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>atValue</td>
        <td>绑定的值</td>
        <td>String / Number</td>
        <td>-</td>
        <td>-</td>
      </tr>
      <tr>
        <td>max</td>
        <td>允许的最大值，超出则用&nbsp;<code>+</code>&nbsp;号显示</td>
        <td>Number</td>
        <td>-</td>
        <td>-</td>
      </tr>
      <tr>
        <td>dot</td>
        <td>是否显示为小红点</td>
        <td>Boolean</td>
        <td>-</td>
        <td>false</td>
      </tr>
      <tr>
        <td>atType</td>
        <td>徽标的类型</td>
        <td>String</td>
        <td><code>success</code>,&nbsp;<code>warning</code>,&nbsp;<code>info</code></td>
        <td>-</td>
      </tr>
      <tr>
        <td>show</td>
        <td>是否显示徽标</td>
      </tr>
      </tbody>
    </table>

  </doc-section>


</section>
